For beginners — Step by step Sketch2React Tutorial ⛳️?

Part 1

This tutorial is based on the insights from dozen or so internal courses we have held about our framework since the start. Learn and follow this and you will have a very good grasp on what our powerful design-tool-to-code framework for Sketch can do.

What is Sketch2React? ?

Basically you use Sketch app to create code components and layouts. No plugin required. You rename layers and groups in the Layer List accordingly to our framework, and our external code app translates it to magic fluffy stuff. Really neat! Actually the code generated is just good old HTML, CSS and very soon React code and components.

What you need ⚙️

• Sketch App version 50-
• Sketch2React Code App (you need to signup to our private beta to get it)
• Mac OS High Sierra and up to Mojave
• Zero code knowledge
• Level — Curious Beginner ?

That’s it. Okey let’s get started!

1. Setup in Sketch app ✅

1. Create a new document
2. Rename Page 1 to Start here
3. Create a new artboard. We are doing web things here so make it at least 576px wide. Height does not matter.
4. Rename artboard from the default name to Start. Only the first artboard in your hierarchy needs to be named like this. For the others you create use common web design sense. Don’t use special characters or smiley’s ( we know you want to — stop that urge .. right …now … )
5. Yes that’s it! Feel free to create your own template file that you can reuse over and over again. Now let’s create something our first code component! ??

Creating your first code component ?

Let’s create our very first code component. Text is still the most common content on websites so let’s create a H1.

1. Make sure you are on the artboard Start
2. Select the Text tool (T)
3. Draw out a text node and style it as you wish
4. Add this to the beginning of the layer name in the Layer List: {text}
5. Voila!

Linking your Sketch file to our code app

1. Open up our Sketch2React Code App
2. ⌘L and browse to the very same Sketch file you created above
3. That’s it! Now you Sketch design file is hot-linked into our Code App
4. Make some changes in your text node, save and it should auto-reload in our app ? ?

Video version of this very same tutorial